<template>
  <div
    class="nav-bar"
    v-nav-active="{
      className: 'nav-item',
      activeClass: 'nav-active',
      currentIndex
    }"
  >
  <!-- 动态class实现 -->
    <!-- <div
      v-for="(item, index) in items"
      :key="index"
      @click="changeIndex(index)"
      class="nav-item"
      :class="{ 'nav-active': currentIndex === index }"
    > -->
    <!-- 自定义指令方式实现 -->
    <div
      v-for="(item, index) in items"
      :key="index"
      @click="changeIndex(index)"
      class="nav-item"
    >
      {{ item }}
    </div>
  </div>
</template>
<script>
import NavActive from "./directives/navActive";
export default {
  directives: {
    NavActive
  },
  data() {
    return {
      items: ["项目1", "项目2", "项目3"],
      currentIndex: 0
    };
  },
  methods: {
    changeIndex(index) {
      this.currentIndex = index;
    }
  }
};
</script>
<style scoped>
.nav-bar {
  width: 400px;
  height: 50px;
  margin: 0 auto;
  display: flex;
  border: 1px solid #000;
}
.nav-item {
  flex: 1;
  height: 100%;
  line-height: 50px;
  text-align: center;
}
.nav-active {
  background-color: #000;
  color: #fff;
}
</style>
